<template>
    <div>
        <van-nav-bar title="绑定手机号" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div>

            <div class="box">
                <van-icon name="phone-circle-o" />
                <h2>你的手机号:{{phone}}</h2>
                <p>点击下方更换手机号</p>
            </div>

            <div>
                <van-button class="green" @click="yz">
                    更换手机号
                </van-button>
            </div>
        </div>
        <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
            <van-nav-bar title="更换手机号" left-text="取消" left-arrow @click-left="onClickpopupLeft" />
            <div class="text">
                <p>更换手机号，下次登录可以使用新的手机号登录。当前手机号:</p>
                <p>{{phone}}</p>
            </div>
            <van-cell-group>
                <van-form>
                    <van-field v-model="value" label="手机号" placeholder="请填写手机号码" :rules="phoneyz"/>
                    <!-- <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
                        <template #button>
                            <van-button size="small" type="primary" @click="clickyzm">发送验证码</van-button>
                        </template>
                    </van-field> -->
                    <div>
                        <van-button :disabled="!btn" :class="[!btn? 'gray' : 'green']" @click="alter" >
                            提交
                        </van-button>
                    </div>
                </van-form>
            </van-cell-group>
        </van-popup>
    </div>
</template>
<script>
export default {
    data() {
        return {
            phone: "",
            show: false,
            value: "",
            sms: "",
            btn: false,
            phoneyz:[
                {
                    validator: value => {
                        return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value)
                    },
                    message:"请输入正确的手机号",
                    trigger:"onBlur"
                }
            ]
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        yz() {
            //console.log("下一步");
            this.show = true
        },
        onClickpopupLeft() {
            this.show = false
        },
       async alter() {
           let res=await this.$frontaxios.post(this.$front.updateUserPhone,{newphone:this.value,code:this.sms});
           if(res.code==1){
               this.$toast.success('手机号更新成功');
           }else if(res.code==-2){
               this.$toast.fail('输入的验证码不对');
           }else
           {
               this.$toast.fail('手机号更新失败');
           }
        },
       async clickyzm(){
            let res =await this.$frontaxios.post(this.$front.getPhoneYzm,{newphone:this.value});
        }
    },
    watch: {
        'value': function (newval, odlval) {
            if (newval == false) {
                this.btn = false
            } else {
                this.btn = true
            }
        }
    },created(){
        this.phone=this.$route.query.nowphone;
    }
}
</script>
<style scoped>
.box {
    margin: 1rem;
    height: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.gray {
    background-color: #F2F2F2;
}

.green {
    background-color: #07C160;
    color: #FFF;

}

.van-button--default {
    width: 8rem;
    border-radius: 0.5rem;
    position: fixed;
    bottom: 5rem;
    left: 35%;
}

.van-icon {
    font-size: 2rem;
}

.text {
    font-size: 1px;
    padding: 1rem;
}
</style>
